// 登录
<template>
  <div>
    <header id="header">
      <div class="logo"></div>
      <div class="sj">
        <input type="text" placeholder="手机号" v-model="userInput">
        <span>获取验证码</span>
      </div>
      <div class="yzm">
        <input type="text" placeholder="密码" v-model="pwdInput">
      </div>
      <!-- 是数据的话就得加上冒号 ： -->
      <button @click="handleLogin" :disabled="isDisabled">登录</button>
      <router-link to="/user/enroll">没有注册？</router-link>
    </header>
  </div>
</template>

<script>
// ajax请求的
import axios from "axios";
import MintUi from "mint-ui";
//也可以通过解构赋值
export default {
  name: "login",
  data() {
    return {
      userInput: "",
      pwdInput: ""
    };
  },
  // computed是计算属性
  computed: {
    isDisabled() {
      if (this.userInput && this.pwdInput) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    handleLogin() {
      // post请求用params
      axios
        .post("/api/films/register", {
          params: {
            // 把用户输入的数据赋值给userPhone 传过去，后台接受userPhone数据
            userPhone: this.userInput,
            pwdInput: this.pwdInput
          }
        })
        .then(res => {
          var result = res.data; //res得到的数据
          if (result.code === 0) {
            MintUi.Toast("登录成功");
            // 写入本地
            localStorage.setItem("userName", this.userInput);
            this.$router.push("/home/NowPlay");
            // 登录成功跳回到之前的页面，在router已经保存在本地，拿出来，在路由操作赋到url去
            // var myNeedPage = localStorage.getItem('myNeedPage')

            // // 取出query的热redirect的值
            // let redirect = this.$route.query.redirect;
            // // this.$router.push(redirect);//这个点击返回会回到登录页面，不能用
            // this.$router.replace(redirect); //replace替换原来保存这个地址，点击返回会直接返回卖座卡的前一步页面 ??
          } else {
            alert(result.msg);
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/common/px2rem.scss";

#header {
  height: px2rem(500);
  display: flex;
  flex-direction: column;
  .logo {
    // flex: 1;
    width: px2rem(100);
    height: px2rem(100);
    background: url(../style/images/logo.jpg) no-repeat;
    background-size: 100%;
    margin: px2rem(100) auto;
  }
  .sj,
  .yzm {
    display: flex;
    height: px2rem(55);
    margin: px2rem(10) px2rem(25);
    border-bottom: px2rem(1) solid #ccc;
    input {
      width: 70%;
      font-size: px2rem(18);
      border: 0;
      outline: none;
    }
    span {
      width: 30%;
      font-size: px2rem(18);
      color: #ccc;
      display: flex;
      align-self: center;
    }
  }
  button {
    display: flex;
    justify-content: center;
    height: px2rem(60);
    margin: px2rem(20) px2rem(25);
    background: #ff5f16;
    font-size: px2rem(20);
    text-align: center;
    color: white;
    border-radius: px2rem(7);
    border: 0;

    // 属性选择器，如果button按钮有disabled
    &[disabled] {
      color: rgb(255, 135, 80);
    }
  }
}
</style>
